<template>
	<div>
		<!-- 头部面包屑 -->
		<div>
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{ path: '/home' }">网页页面</el-breadcrumb-item>
				<el-breadcrumb-item>小区管理</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<!-- 输入框 -->
		<div style="margin-top:10px;">
			<el-form :inline="true">

				<el-form-item label="小区名称">
					<el-input v-model="queryInfo.communityName" placeholder="请输入小区名称"></el-input>
				</el-form-item>

				<el-form-item label="创建时间:">
					<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="date" type="daterange"
						range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
					</el-date-picker>
				</el-form-item>


				<el-form-item>
					<el-button type="primary" @click="queryCommunityList">搜索</el-button>
				</el-form-item>
			</el-form>
		</div>


		<!-- 搜索 -->
		<div style="margin-bottom:10px;">
			<el-button @click="addCommunity" type="primary">新增小区</el-button>
		</div>

		<!-- 表格展示数据 -->
		<div>
			<template>
				<el-table stripe :data="communityList" style="width: 100%" border
					:header-cell-style="{ backgroundColor:'#eee'}">
					<el-table-column prop="communityId" label="ID">
					</el-table-column>
					<el-table-column prop="communityName" label="名称">
					</el-table-column>
					<el-table-column prop="communityAddress" label="位置">
					</el-table-column>
					<el-table-column prop="communityUserCount" label="用户数量">
					</el-table-column>
					<el-table-column prop="communityShopCount" label="关联门店">
					</el-table-column>
					<el-table-column prop="createTime" label="创建时间">
					</el-table-column>
					<el-table-column label="操作">
						<!-- 使用作用域插槽 -->
						<template slot-scope="scope">
							<!-- {{scope.row.communityId}} -->
							<el-button type="text" @click="chakan(scope.row.communityId)">查看关联门店</el-button>
							<el-button type="text" @click="editCommunity(scope.row)">编辑</el-button>
							<el-button type="text" @click="removeCommunity(scope.row.communityId)">删除</el-button>
						</template>

					</el-table-column>
				</el-table>
			</template>
		</div>

		<!-- 分页 -->
		<div style="margin-top:10px;">
			<!-- current-page：要访问的页码
			page-sizes：可选择的每页展示的条数
			page-size：每页展示的条数
			total：数据总条数
			@size-change：当选择页码时触发的事件
			@current-change:当每页展示的条数发生改变时，触发的函数
			 -->
			<el-pagination :current-page="queryInfo.pageNum" :page-sizes="[1, 5, 10, 20]" :page-size="queryInfo.pageNum"
				@size-change="handleSizeChange" @current-change="handleCurrentChange"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>




		<!-- 添加或修改小区对话框
		 title:对话框的名称
		 :visible.sync:true对话框是否展示
		 -->
		<el-dialog :title='title' :visible.sync="show" @close="cancel">
			<el-form :model="community">
				<el-form-item label="小区名称" label-width="100px">
					<el-input placeholder="请输入小区名称" v-model="community.communityName"></el-input>
				</el-form-item>
				<el-form-item label="所属地区" label-width="100px">
					<!-- <el-input v-model="community.communityCoordinates"></el-input> -->
					<el-cascader v-model="address" :options="citys"></el-cascader>

				</el-form-item>
				<el-form-item label="" label-width="100px">
					<el-input v-model="community.communityAddress" placeholder="请输入小区的详细地址"></el-input>
				</el-form-item>
				<el-form-item label="小区坐标" label-width="100px">
					<el-button @click="getGeo">获取位置</el-button>
					<span
						v-show="community.communityLongitude">{{community.communityLongitude}},{{community.communityLatitude}}</span>
				</el-form-item>

			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="updateCommunity">确 定</el-button>
			</div>
		</el-dialog>




		<!--查看关联门店 -->

		<el-dialog :title="title" :visible.sync="chakans" @close="cancel">

			<el-row>
				<div style="margin-top:10px;">
					<el-form :inline="true">
						<el-form-item label="小区名称">
							<el-input v-model="guanlianmendian.shopName" placeholder="请输入小区名称"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="queryCommunityLists">搜索</el-button>
						</el-form-item>

						<el-form-item>
							<el-button type="primary" @click="addstores">添加门店管理</el-button>
						</el-form-item>
					</el-form>
				</div>
			</el-row>

			<el-table :data="guanlian" border>
				<el-table-column property="shopName" label="名称"></el-table-column>
				<el-table-column property="shopId" label="ID"></el-table-column>
				<el-table-column property="address" label="排序"></el-table-column>
				<el-table-column property="shopAddress" label="地址"></el-table-column>
				<el-table-column property="salesVolume" label="订单数量"></el-table-column>
				<el-table-column property="address" label="操作">
					<template>
						<el-button type="text" @click="open">删除</el-button>
					</template>
				</el-table-column>
			</el-table>

			<el-row>
				<!-- 分页 -->
				<div style="margin-top:10px;">
					<!-- current-page：要访问的页码
			  	page-sizes：可选择的每页展示的条数
			  	page-size：每页展示的条数
			  	storeTotal：数据总条数
			  	@size-change：当选择页码时触发的事件
			  	@current-change:当每页展示的条数发生改变时，触发的函数
			  	 -->
					<el-pagination :current-page="guanlianmendian.pageNum" :page-sizes="[1, 5, 10, 20]"
						:page-size="guanlianmendian.pageSize" @size-change="handleSizeChanges"
						@current-change="handleCurrentChanges" layout="total, sizes, prev, pager, next, jumper"
						:total="storeTotal">
					</el-pagination>
				</div>
			</el-row>
			<!-- 取消按钮 -->
			<el-row>
				<el-button @click="cancels">取消</el-button>
			</el-row>
		</el-dialog>




		<!-- 添加门店管理 -->
		<el-dialog :title="添加关联门店" :visible.sync="shopchakan" @close="cancel">

			<el-row>
				<div style="margin-top:10px;">
					<el-form :inline="true">
						<el-form-item label="小区名称">
							<el-input clearable @click="addstores" v-model="shopguanlianmendian.shopName"
								placeholder="请输入小区名称"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="addstores">搜索</el-button>
						</el-form-item>
					</el-form>
				</div>
			</el-row>

			<el-table :data="shopList" border @selection-change="handleSelectionChange">>
				<el-table-column type="selection" width="55">
				</el-table-column>
				<el-table-column property="shopName" label="名称"></el-table-column>
				<el-table-column property="shopId" label="ID"></el-table-column>
				<el-table-column property="address" label="排序"></el-table-column>
				<el-table-column property="shopAddress" label="地址"></el-table-column>
				<el-table-column property="salesVolume" label="订单数量"></el-table-column>
				<template>
					<el-button type="text" @click="open">删除</el-button>
				</template>
				</el-table-column>
			</el-table>

			<el-row>
				<!-- 分页 -->
				<div style="margin-top:10px;">
					<!-- current-page：要访问的页码
			  	page-sizes：可选择的每页展示的条数
			  	page-size：每页展示的条数
			  	shopTotal：数据总条数
			  	@size-change：当选择页码时触发的事件
			  	@current-change:当每页展示的条数发生改变时，触发的函数
			  	 -->
					<el-pagination :current-page="shopguanlianmendian.pageNum" :page-sizes="[1, 5, 10, 20]"
						:page-size="shopguanlianmendian.pageSize" @size-change="handleSizeChanges2"
						@current-change="handleCurrentChanges2" layout="total, sizes, prev, pager, next, jumper"
						:total="shopTotal">
					</el-pagination>
				</div>
			</el-row>
			<el-row>
				<el-button>取消</el-button>
				<el-button @click="appshops">保存</el-button>
			</el-row>
		</el-dialog>








	</div>
</template>

<script>
	//导入省市区数据
	import citys from '../assets/citydata.js'
	export default {
		data() {
			return {
				// 查询信息对象
				queryInfo: { //模糊查询中的所有的数据参数
					name: '',
					communityName: '', // 小区名称
					startTime: '', // 开始时间
					endTime: '', // 结束时间
					pageNum: 1, // 页码
					pageSize: 10, // 每页展示条数
				},
				total: 5, //数据总条数
				date: '',
				communityList: [],

				//对话框内容
				show: false,
				title: '新增小区',
				community: { //小区对象
					addOrUpdateFlag: 1, //是否添加修改
					communityAddress: "", //详细地址
					communityAreaCode: "", //区域码
					communityCity: " ", //城市
					communityCoordinates: "", //全地址
					communityDistrict: "", //区域
					communityId: "", //编号
					communityLatitude: "", //维度
					communityLongitude: "", //经度
					communityName: "", //小区名称
					communityProvince: "", //省份
				},
				citys: citys, //所有省市区对象
				address: [], //省市区的三个数据数组

				//查看门店管理
				chakans: false,
				guanlian: [], //关联门店
				communityId: '', //小区编号
				guanlianmendian: {
					pageNum: 1,
					pageSize: 5,
					shopName: '',
					communityId: '',
				},
				storeTotal: '', //数据总条数

				shopList: [], //所有的门店集合
				shopguanlianmendian: { //根据信息来查询门店集合
					pageNum: 1,
					pageSize: 5,
					shopName: '',
					communityId: '',
				},
				shopTotal: '', //数据总条数
				shopArray: [], //已经被选择的集合信息
			}
		},
		methods: {
			//保存关联门店
			appshops() {
				let shopIds = [];
				//遍历集合获取门店编号数组
				for (let it of this.shopArray) {
					shopIds.push(it.shopId)
				}
				//调用接口把数据加入到小区中
				this.$http.post('associatedStores/addAssociatedStores', {
						fendeShopCommunityList: shopIds,
						panghuCommunityId: this.communityId
					})
					.then(res => {
						if (res.data.status == 200) {
							this.$message.success('添加成功');
							this.shopchakan = false;
							this.queryCommunityList();
						} else {
							this.$message.error('添加失败 ')
						};
					})
					},
				handleSelectionChange(val) {
						this.shopArray = val;
					},
					//查看关联门店页面
					handleSizeChanges2(val) {
						//console.log(`每页$ {val}条`);
						this.shopguanlianmendian.pageSize = val;
						this.shopguanlianmendian.pageNum = 1;
						this.addstores(this.communityId);
					},
					handleCurrentChanges2(val) {
						//console.log(`当前页： $ {val}`);
						this.shopguanlianmendian.pageNum = val;
						this.addstores(this.communityId)
					},
					//进入添加门店的列表框中
					addstores() {
						//链接接口查询所有的门店信息
						this.shopguanlianmendian.communityId = this.communityId;
						this.$http.get('associatedStores/findShopListByAdd', {
								params: this.shopguanlianmendian
							})
							.then(res => {
								this.shopList = res.data.data.list;
								this.shopTotal = res.data.data.total;
								this.chakans = false;
								this.shopchakan = true;
								this.queryCommunityList();
							})
					},


					//搜索
					queryCommunityLists() {
						this.$http.get('associatedStores/associatedStoresList', {
								params: this.guanlianmendian
							})
							.then(res => {
								//console.log(res.data)
								if (res.data.status == 200) {
									//console.log(res.data.data.list)
									this.guanlian = res.data.data.list
									//动态赋予数据总条数
									this.storeTotal = res.data.data.total;
								} else {
									this.$message.error('服务器接口异常！')
								}
							})
							.catch(err => {
								this.$message.error('服务器接口异常！')
							})
					},



					//关联门店里面的删除
					open() {
						this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning',
							center: true
						}).then(() => {
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
						}).catch(() => {
							this.$message({
								type: 'info',
								message: '已取消删除'
							});
						});
					},
					//关联门店里面的取消
					cancels() {
						this.chakans = false

					},
					//查看关联门店页面
					handleSizeChanges(val) {
						//console.log(`每页$ {val}条`);
						this.guanlianmendian.pageSize = val;
						this.guanlianmendian.pageNum = 1;
						this.chakan(this.communityId);
					},
					handleCurrentChanges(val) {
						//console.log(`当前页： $ {val}`);
						this.guanlianmendian.pageNum = val;
						this.chakan(this.communityId)
					},
					//查看关联门店
					chakan(id) {
						this.chakans = true;
						this.title = "查看关联门店";
						this.communityId = id;
						this.guanlianmendian.communityId = id;
						//调用接口
						this.$http.get("associatedStores/associatedStoresList", {
								params: this.guanlianmendian
							})
							.then(res => {
								this.guanlian = res.data.data.list;
								this.storeTotal = res.data.data.total;
							})
					},
					//删除数据,删除提示框可以提前在组件里面寻找代码复制粘贴
					removeCommunity(id) {
						this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							this.$http.post("community/communityRemove", {
									communityId: id
								})
								.then(res => {
									if (res.data.status == 200) {
										this.$message({
											type: 'success',
											message: '删除成功!'
										});
										this.queryCommunityList();
									} else {
										this.$message({
											type: 'info',
											message: '删除失败'
										});
									}
								})
						}).catch(() => {
							this.$message({
								type: 'info',
								message: '已取消删除'
							});
						});
					},
					//去修改的页面显示到弹出框
					editCommunity(row) {
						this.community = row;
						this.show = true;
						this.title = "编辑小区";
						this.address = [
							this.community.communityProvince,
							this.community.communityCity,
							this.community.communityDistrict,
						];
						this.community.addOrUpdateFlag = 2;
					},
					// 新增里面的取消
					cancel() {
						this.show = false;
						this.community = { //小区对象
							addOrUpdateFlag: 1, //是否添加修改
							communityAddress: "", //详细地址
							communityAreaCode: "", //区域码
							communityCity: " ", //城市
							communityCoordinates: "", //全地址
							communityDistrict: "", //区域
							communityId: "", //编号
							communityLatitude: "", //维度
							communityLongitude: "", //经度
							communityName: "", //小区名称
							communityProvince: "", //省份
						};
						this.address = [];
					},
					//添加或修改小区
					updateCommunity() {
						this.$http.post('community/communityUpdate', this.community)
							.then(res => {
								if (res.data.status == 200) {
									this.$message.success('添加成功！');
									this.show = false;
									this.queryCommunityList();
									this.cancel()
								} else {
									this.$message.error('添加失败!')
								}
							})
					},
					//获取经纬度
					getGeo() {
						//如果没有选着省市区，则不可以获取经纬度
						if (!this.community.communityProvince) {
							this.$message.error("请选择省市区")
							return false;
						}
						//获取经纬度接口
						let addr = this.community.communityProvince +
							this.community.communityCity +
							this.community.communityDistrict +
							this.community.communityAddress;
						this.$http.get('https://restapi.amap.com/v3/geocode/geo', {
								params: {
									key: '457886b5972a97e93fb9cdccebfd450f',
									address: addr
								}
							})
							//找到经纬度，前后拆分经纬度
							.then(res => {
								//console.log(res)
								//console.log(res.data.geocodes[0].location)
								let loc = res.data.geocodes[0].location
								this.community.communityLongitude = loc.split(',')[0];
								this.community.communityLatitude = loc.split(',')[1];
								console.log(this.community)
							})
					},
					//进入添加小区的对话框
					addCommunity() {
						this.show = true;
						this.title = "新增小区";
						this.community.addOrUpdateFlag = 1;
					},


					//页面
					handleSizeChange(val) {
						//console.log(`每页$ {val}条`);
						this.queryInfo.pageSize = val;
						this.queryInfo.pageNum = 1;
						this.queryCommunityList();
					},
					handleCurrentChange(val) {
						//console.log(`当前页： $ {val}`);
						this.queryInfo.pageNum = val;
						this.queryCommunityList()
					},
					//查询所有的小区信息函数
					queryCommunityList() {
						this.$http.get('community/communityList', {
								params: this.queryInfo
							})
							.then(res => {
								//console.log(res.data)
								if (res.data.status == 200) {
									//console.log(res.data.data.list)
									this.communityList = res.data.data.list
									//动态赋予数据总条数
									this.total = res.data.data.total;
								} else {
									this.$message.error('服务器接口异常！')
								}
							})
							.catch(err => {
								this.$message.error('服务器接口异常！')
							})
					}
			},
			mounted() { //钩子函数--页面加载后直接执行的代码块
				this.queryCommunityList()
			},
			watch: {
				//需求名称必须和变量保持一致
				date() {
					if (this.date) {
						this.queryInfo.startTime = this.date[0];
						this.queryInfo.endTime = this.date[1];
					} else {
						this.queryInfo.startTime = ''
						this.queryInfo.endTime = ''
					}
				},
				address() {
					this.community.communityProvince = this.address[0];
					this.community.communityCity = this.address[1];
					this.community.communityDistrict = this.address[2];
				},
			}
		}
</script>

<style>
</style>